<template>
    <el-dialog
        :title="title"
        :visible.sync="visible"
        width="600px"
        :before-close="handleClose">
           <el-form ref="formData" :rules="rules"  :model="formData" label-width="100px" label-position="right" style="width:400px" status-icon>
                <el-form-item label="广告图片" prop="imageUrl">
                    <!-- 上传图片 -->
                    <el-upload
                        class="avatar-uploader"
                        action=""
                        :show-file-list="false"
                        :http-request="uploadMainImg"
                        >
                        <img v-if="formData.imageUrl" :src="formData.imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="广告标题" prop="title">
                    <el-input v-model="formData.title"/>
                </el-form-item>

                 <el-form-item label="广告链接" prop="advertUrl">
                    <el-input v-model="formData.advertUrl"/>
                </el-form-item>

                <el-form-item label="跳转方式" prop="advertTarget">
                       <el-select v-model="formData.advertTarget" clearable style="width:185px;">
                        <el-option label="新窗口打开" value="_blank"></el-option>
                        <el-option label="当前窗口打开" value="_self"></el-option>                           
                    </el-select>
                </el-form-item>

                <el-form-item label="状态：" prop="status">
                    <el-radio-group v-model="formData.status" style="width:300px">
                        <el-radio :label="1">正常</el-radio>
                        <el-radio :label="0">禁用</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="广告位置" prop="position">
                      <el-input-number v-model="formData.position" :min="1" :max="1000"  style="width:300px">
                      </el-input-number>
                </el-form-item>

                <el-form-item label="排序：" prop="sort">
                        <el-input-number v-model="formData.sort" :min="1" :max="1000"  style="width:300px"></el-input-number>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('formData')" size="mini">确定</el-button>
                    <el-button size="mini" @click="handleClose">取消</el-button>
                </el-form-item>
                </el-form>
        </el-dialog>
</template>
<script>
import commonApi from '@/api/common'
import api from '@/api/advert'
export default{
    props:{
        title:{ //弹窗的标题
            type:String,
            default:''
        },
        visible:{ //弹出窗口，true就弹出
            type:Boolean,
            default:false
        },
        formData:{ // 表单提交的数据
            type:Object,
            default:{}
        },
        oldimageUrl:String,
        remoteClose:Function //父组件传过来的函数用于关闭窗口
    },
    data(){
        return {
            rules:{
                imageUrl:[
                    {required:true,message:"请上传广告图片",trigger:"blur"}
                ],
                title:[
                    {required:true,message:"请输入广告标题",trigger:"blur"}
                ],
                advertUrl:[
                    {required:true,message:"广告链接不能为空",trigger:"blur"}
                ],
                advertTarget:[
                    {required:true,message:"请选择跳转方式",trigger:"change"}
                ],
                status:[
                    {required:true,message:"请确定广告状态",trigger:"change"}
                ],
                position:[
                    {required:true,message:"请输入广告位置",trigger:"blur"}
                ],
                sort:[
                    {required:true,message:"请输入排序号",trigger:"blur"}
                ],
            }
        }   
    },
    methods:{
        //关闭窗口
        handleClose(){
            //关闭前重置表单
            this.$refs['formData'].resetFields()
            //不可已通过this.visible = false来关闭
            this.remoteClose()
        }, 
        //提交表单数据
        submitForm(formName){
            this.$refs[formName].validate((valid) => {
                    if (valid) {
                       //校验通过，提交表单数据
                       this.submitData()
                    } else {
                        //console.log('error submit!!');
                        return false;
                    }
            });
        },
        async submitData(){             
            let responce = null
            if(this.formData.id){
              responce = await api.update(this.formData)
            }else{
                //新增
               responce = await api.add(this.formData)
            }
            if(responce.code === 20000){
                this.$message({
                showClose: true,
                message:responce.message,
                type: 'success'
                });
                this.handleClose()
            }else{
                this.$message({
                showClose: true,
                message:"新增失败",
                type: 'success'
                });
            }
        },
        //上传图片,file上传的图片对象
        uploadMainImg(file){
            const data = new FormData()
            data.append('file',file.file)
            //上传接口
            commonApi.uploadImg(data).then(res=>{
                //将之前的图片删除
                this.deleteImg()
                //回显图片
                this.formData.imageUrl = res.data
            }).catch(error=>{
                this.$message.error('上传失败')
            })

        },
        deleteImg(){
            //如果之前有图片，则删除之前的
            if(this.formData.imageUrl && this.formData.imageUrl !== this.oldimageUrl){
                //发送请求删除
                commonApi.deleteImg(this.formData.imageUrl)
            }
        }
    }
}
</script>
<style scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

